<template>
  <div class="docWrap">
    <!-- 预览文件的地方（用于渲染） -->
    <div ref="file" v-loading="loading"></div>
  </div>
</template>

<script>
// 引入axios用来发请求
import axios from "axios";
import * as docx from "docx-preview";
import base from "@/utils/http/base"; // 导入接口域名列表

export default {
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
    };
  },
  watch: {
    info: {
      handler(newValue, oldValue) {
        this.loading = true;
        this.info.file_url && this.goPreview();
      },
      deep: true,
      immediate: true,
    },
  },
  // computed: {
  //   fileUrl() {
  //     return `${base.url}/knowledge_base${this.info.file_url.split("/knowledge_base")[1]}`;
  //   },
  // },
  mounted() {
    // console.log("使用插件的renderAsync方法来渲染", this.info);
  },
  methods: {
    // 预览
    goPreview() {
      let fileUrl = `${base.url}/knowledge_base${this.info.file_url.split("/knowledge_base")[1]}`;
      axios({
        method: "get",
        responseType: "blob", // 因为是流文件，所以要指定blob类型
        url: fileUrl, // 自己的服务器，提供的一个word下载文件接口
      })
        .then(({ data }) => {
          this.loading = false;
          console.log(data); // 后端返回的是流文件
          docx.renderAsync(data, this.$refs.file); // 渲染到页面
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.docWrap {
  // 指定样式宽度
  width: 100%;
  height: 100%;
  //   overflow-x: auto;
  > div {
    width: 100%;
    height: 100%;
    overflow: auto;
    ::v-deep .docx-wrapper {
      padding: 0px;
      > section.docx {
        margin-bottom: 10px;
        width: 100% !important;
        padding: 0px !important;
      }
      .docx p,
      p > span {
        font-size: 16px !important;
      }
    }
  }
}
</style>
